<template>
  <div class="PageA">
    <navbar>
      <div slot="center">会员资料</div>
      <div slot="left" class="left-img">
          <img @click="fan" src="../../assets/img/la.png" />
      </div>
    </navbar>

    <div class="contentC">
      <div class="TopMargin">
        <mt-popup
          v-for="(item, index) in listOption"
          :key="item.listOption"
          v-model="popupVisibles[index].popupVisible"
          position="bottom"
          style="width: 100%"
        >
          <mt-picker :slots="item" @change="onValuesChange"></mt-picker>
        </mt-popup>
        <div
          class="strip"
          v-for="(item, index) in list"
          v-bind:key="item.list"
          @click="show(index)"
        >
          <div class="special">
            <div class="specialA">{{ item.title }}</div>
            <span>{{ item.value }}</span>
            <div class="specialB">
              <img :src="item.tu" />
            </div>
          </div>
          <div class="specialC" v-if="index < list.length"></div>
        </div>
        <router-link tag="div" class="exception" to="/member">
          <div class="exceptionA">
            <img src="../../assets/img/77.png" />
          </div>
          <div class="exceptionB">开通钻石会员可使用高级搜索条件</div>
        </router-link>
        <div
          class="strip"
          v-for="(item, index) in expertList"
          v-bind:key="item.expertList"
          @click="show(index + 3)"
        >
          <!--前面三个普通搜索选项-->
          <div class="special">
            <div class="specialA">{{ item.title }}</div>

            <div class="specialB">
              <img :src="item.tu" />
            </div>
          </div>
          <div class="specialC" v-if="index < expertList.length"></div>
        </div>

        <div class="bond"><button @click="search()">搜索</button></div>
      </div>
    </div>
  </div>
</template>


<script>
import navbar from "../../components/navbar/navbar";
import { Toast } from "mint-ui";
export default {
  name: "userData",
  components: {
    navbar,
  },
  methods: {
    fan() {
      this.$router.back();
    },
    show(i) {
      //弹出选项框
      if (i < 3) {
        //判断点击的是普通用户的还是钻石用户的，前三个是普通用户的
        if (i == 1) {
          //循环赋值年龄选项
          this.listOption[1][2].values.push("不限");
          for (var x = 18; x <= 80; x++) {
            this.listOption[1][0].values.push(x + "岁");
            this.listOption[1][2].values.push(x + "岁");
          }
        }
        this.currentIndex = i;
        this.popupVisibles[i].popupVisible = true;
      } else {
        if (this.$store.state.user.power == 3) {
          //判断用户权限等级（1=普通，2=高级，3=钻石）
          this.currentIndex = i;
          this.popupVisibles[i].popupVisible = true;
        } else {
          //跳到会员购买页面
          this.$router.replace("/j5-5-1");
        }
      }

      //console.log(i, this.popupVisible);
    },
    onValuesChange(picker, values) {
      if (this.currentIndex >= 0) {
        if (values.length > 1) {
          this.list[this.currentIndex].value = values[0] + "-" + values[1];
          if (values[0] == "北京" || values[0] == "上海") {
            picker.setSlotValue(1, values[0]);
            this.list[this.currentIndex].value = values[0];
          }
        } else {
          this.list[this.currentIndex].value = values[0];
        }
      }
    },
    search() {
      for (var i in this.list) {
        //遍历判断是否有选择内容
        if (this.list[i].value != "") {
          this.$router.replace("/recommend");
          break;
        } else {
          Toast("至少要选择一项才能搜索哦");
        }
      }
    },
  },
  data() {
    return {
      currentIndex: -1,
      popupVisibles: [
        {
          popupVisible: false,
        },
        {
          popupVisible: false,
        },
        {
          popupVisible: false,
        },
        {
          popupVisible: false,
        },
        {
          popupVisible: false,
        },
        {
          popupVisible: false,
        },
        {
          popupVisible: false,
        },
        {
          popupVisible: false,
        },
        {
          popupVisible: false,
        },
      ],
      list: [
        {
          //普通用户搜索
          title: "性别",
          value: "",
          tu: require("../../assets/img/six.png"),
        },

        {
          title: "年龄区间",
          value: "",
          tu: require("../../assets/img/six.png"),
        },

        {
          title: "地区",
          value: "",
          tu: require("../../assets/img/six.png"),
        },
      ],
      listOption: [
        [
          {
            values: ["男", "女"],
          },
        ],
        [
          {
            flex: 1,
            values: [],
            className: "slot1",
            textAlign: "right",
          },
          {
            divider: true,
            content: "-",
            className: "slot2",
          },
          {
            flex: 1,
            values: [],
            className: "slot3",
            textAlign: "left",
          },
        ],
        [
          {
            flex: 1,
            values: ["北京", "上海"],
            className: "slot1",
            textAlign: "right",
          },
          {
            divider: true,
            content: "-",
            className: "slot2",
          },
          {
            flex: 1,
            values: ["北京", "上海"],
            className: "slot3",
            textAlign: "left",
          },
        ],
        [
          {
            values: ["居住地"],
          },
        ],
        [
          {
            values: ["学历"],
          },
        ],
        [
          {
            values: ["月收入"],
          },
        ],
        [
          {
            values: ["婚姻情况"],
          },
        ],
        [
          {
            values: ["车辆情况"],
          },
        ],
        [
          {
            values: ["房产情况"],
          },
        ],
      ],
      expertList: [
        {
          //高级用户搜索
          title: "居住地",
          tu: require("../../assets/img/six.png"),
        },

        {
          title: "学历",
          tu: require("../../assets/img/six.png"),
        },

        {
          title: "月收入",
          tu: require("../../assets/img/six.png"),
        },

        {
          title: "婚烟情况",
          tu: require("../../assets/img/six.png"),
        },

        {
          title: "车辆情况",
          tu: require("../../assets/img/six.png"),
        },

        {
          title: "房产情况",
          tu: require("../../assets/img/six.png"),
        },
      ],
    };
  },
};
</script>
<style scoped>
.strip {
  text-align: left;
  padding: 0 15px;
}
.special {
  flex: 1;
  display: flex;
  height: 50px;
  line-height: 50px;
}
.specialA {
  flex: 1;
}
.specialB img {
  width: 25px;
  height: 25px;
  margin: 7px;
}
.specialC {
  border: 1px solid rgb(175, 175, 175);
}
.exception {
  display: flex;
  height: 40px;
  line-height: 40px;
  background-color: blanchedalmond;
}
.exceptionA img {
  width: 20px;
  height: 20px;
  margin: 7px;
  margin-left: 20px;
  margin-top: 10px;
}
.exceptionB {
  font-size: 14px;
}
.bond {
  padding: 0 15px;
  margin-top: 50px;
}
.bond button {
  width: 100%;
  height: 50px;
  font-size: 18px;
  background-color: rgb(185, 185, 185);
  border: none;
  border-radius: 5px;
}
.left-img img {
  width: 30px;
  height: 30px;
  margin: 10px;
}
</style>
